<template>
  <div style="height:430px;" v-loading="loadings">
    <el-row style="padding-top:20px;height:100%;">
      <el-col :span="6" class="colImg">
        <img src="../../assets/images/zaixian.png" alt="" v-if="lineType=='line'">
        <img src="../../assets/images/lixian.png" alt="" v-else>
      </el-col>
      <el-col :span="18" style="padding-left:20px;">
        <div class="formDiv">
          <el-form ref="form" :model="form" v-if="lineType=='line'" label-width="120px">
            <el-form-item label="IP地址">
              <el-input v-model="form.ip" class="inp" placeholder="请输入IP地址"></el-input>
            </el-form-item>
            <el-form-item label="端口号">
              <el-input v-model="form.port" class="inp" placeholder="请输入端口号"></el-input>
            </el-form-item>
          </el-form>
          <el-form ref="form1" :model="form1" v-else label-width="120px" style="width: 60%;">
            <el-row>
              <el-col :span="20">
                <el-form-item label="选择配置文件">
                  <el-input v-model="form1.ldapUrl" class="inp" placeholder="请选择配置文件"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="3"
                  :file-list="fileList">
                  <el-button type="primary">浏览</el-button>
                </el-upload>
              </el-col>
            </el-row>

          </el-form>
        </div>
        <div class="deploy-btn">
          <el-button type="warning" v-if="lineType=='line'"  @click.native="probe">探 测</el-button>

          <!-- <el-button type="primary" @click.native="search('next')" v-if="lineType=='ukey'">下一步</el-button> -->
          <el-button type="primary" @click.native="softnext" v-if="lineType=='online'">下一步</el-button>
          <el-button type="info"  style ="width:-1px;" @click.native="dialogFormVisible =true">认证</el-button>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="接入认证客户端" :visible.sync="dialogFormVisible" :close-on-press-escape="false" :close-on-click-modal="false" @closed="handleClose">
      <div class="form-holder">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="账号">
            <el-input v-model="formInline.user" placeholder="请输入账号"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="formInline.password" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button  type="primary" @click="login">认证登录</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    lineType: {
      type: String
    }
  },
  data() {
    return {
      form: {
        ip: '',
        port: '',
      },
      form1: {},
      nextShow: true,
      show: '1',
      fileList: [],
      dialogFormVisible: false,
      loginMode: window.loginMode,
      formInline: {
        user:'',
        password:'',
      },
      loadings: false,
    }
  },
  created() {
  },
  methods: {
    // 探测
    probe() {
      let that = this
      this.loadings = true
      sessionStorage.setItem('form',JSON.stringify(this.form))
      this.$postForJson('vgmp/config/checkserverip', { data: this.form }).then(res => {
        let data = res.data;
        this.loadings = false
        console.log(data);
        if (data.errorcode != '0') {
          this.$message.error(data.errormsg)
          this.dialogFormVisible=true
          return false
        }
        this.$confirm('探测成功！', '提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
          type: 'warning'
        }).then(() => {
          that.dialogFormVisible=false
          that.$emit('product')
        }).catch(() => {

        });
      })
    },
    next() {
      this.nextShow = false
      this.show = '2'
    },
    prev() {
      this.nextShow = true
      this.show = '1'
    },
    login() {
      let userNameValue = this.formInline.user;
      let pinValue = this.formInline.password;
      if (userNameValue === "") {
        this.$message({
          message: "账号不能为空！",
          type: "warning",
        });
        return false;
      }
      if (pinValue === "") {
        this.$message({
          message: "密码不能为空！",
          type: "warning",
        });
        return false;
      }
      let data = {
        user: userNameValue, // 认证用户
        password: pinValue, //认证密码
      };
      if (this.loginMode == "DEBUG") {
        this.dialogFormVisible=false
        // this.$emit('product')
      } else {
        this.loadings = true
        this.$postForJson("/jrkz/auth/authlogin", data).then((res) => {
          console.log(res,150)
          this.loadings = false
          if (res.data.errorcode == "0") {
            // this.$message({
            //   message: "认证通过！",
            //   type: "success",
            // });
            this.dialogFormVisible=false
            // this.$emit('product')
          } else {
            this.$message({
              message: res.data.errormsg,
              type: "warning",
            });

          }

        });
      }
    },
    handleClose(){
      this.formInline.user = ''
      this.formInline.password = ''
      this.dialogFormVisible = false
    },
    handequ() {
      this.$router.push("/home");
    },
  }
}
</script>

<style scoped>
.colImg {
  border-right: 1px solid #ddd;
  height: 410px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.inp {
  width: 100%;
}

.deploy-btn {
  position: fixed;
  text-align: right;
  bottom: 30px;
  right: 22%;
  /* background-color: #EEE; */
}
.deploy-btn1 {
  position: fixed;
  text-align: right;
  bottom: 40px;
  right: 45%;
  /* background-color: #EEE; */
}
.formDiv {
  width: 100%;
  height: 350px;
  border-radius: 10px;
  /* background: rgba(13, 68, 98, 0.6); */
  background: rgba(255, 255, 255, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
  /* //   transform: translateY(-20px); */
}
img {
  width: 150px;
}
</style>
